<template>
  <div>
    <el-select v-model="props.deptId" :clearable="clearable" :disabled="disabled" :placeholder="placeholder"
               filterable
               style="width: 100%;" @change="deptChange">
      <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId">
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>

import {listDept} from '@/api/system/dept'

const deptList = ref<any>([])
const orgId = ref("")
const emits = defineEmits(['deptChange'])
const {proxy} = getCurrentInstance() as any
const props = defineProps({
  placeholder: {
    type: String,
    default: "请选择科室"
  },
  // 科室属性
  deptAttributeStr: {
    type: String,
    default: ""
  },
  // 临床标识
  clinicalSignStr: {
    type: String,
    default: ""
  },
  // 门诊住院属性集合
  clinicVsVisitStr: {
    type: String,
    default: ""
  },
  //内、外科 其他科室
  internalOrSurgeryStr: {
    type: String,
    default: ""
  },
  // 机构id
  orgId: {
    type: String,
    default: ''
  },
  // 科室id
  deptId: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  },
  clearable: {
    type: Boolean,
    default: true
  }
})
watch(() => props.orgId, (newValue, _oldValue) => {
  orgId.value = newValue
  if (orgId.value) {
    getDeptList()
  }
}, {deep: true, immediate: true})

// 获取科室集合
function getDeptList() {
  let queryParams = {
    deptAttributeArray: proxy.$stringToArray(props.deptAttributeStr, ","),
    clinicVsVisitArray: proxy.$stringToArray(props.clinicVsVisitStr, ","),
    clinicalSignArray: proxy.$stringToArray(props.clinicalSignStr, ","),
    internalOrSurgeryArray: proxy.$stringToArray(props.internalOrSurgeryStr, ","),
    orgId: orgId.value
  }
  listDept(queryParams).then(res => {
    deptList.value = res.data
  })
}

// 点击事件
function deptChange(value) {
  let deptInfo = {}
  let index = deptList.value.findIndex(item => {
    return item.deptId === value
  })
  if (index > -1) {
    deptInfo = deptList.value[index]
  }
  emits("deptChange", deptInfo)
}
</script>
<script lang="ts">
export default {
  name: "deptList"
}
</script>

<style scoped></style>
